import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tools, SearchBar } from 'weaver-mobile';
import { SearchAdvanced, ListViewPage } from 'weaver-mobile-page';
import { getTemplateBasicItem, getTemplateLinkItem, getTemplateBasicItemToHtml, renderNoData } from '../public';
import { compareParams } from '../../util';
import RouteModal from '../communication/RouteModal';
import BackTop from '../../public/back-to-top';
const getLabel = Tools.getLabel;
@withRouter
@inject('applyStore')
@observer
export default class Apply extends React.Component {
  
  static defaultProps = {
    prefixCls: 'cowork-apply-history',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
      coworkId: '',
    }
  }

  componentDidMount() {
    const { applyStore: { getCoworkApplyPageList, getCoworkApplyLogShareCondition } } = this.props;
    getCoworkApplyPageList();
    getCoworkApplyLogShareCondition();
  }

  componentWillUnmount() {
    const { applyStore: { clearLog } } = this.props;
    clearLog();
  }

  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const curCls = "cowork-template-list";
          return (
            <div className={curCls} key={data.id}>
              {getTemplateBasicItem(curCls, getLabel(390652, '申请主题'), data.namespan)}
              {getTemplateBasicItem(curCls, getLabel(390653, '申请时间'),data.applydatespan)}
              {getTemplateLinkItem(curCls, getLabel(24743, '审批人'), data.approveidspan,data.approveid)}
              {getTemplateBasicItemToHtml(curCls, getLabel(15378, '审批状态'), data.statusspan)}
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  render(){
    const { prefixCls, applyStore } = this.props;
    const { applyLogList, applyLogSearch, getCoworkApplyPageList, doApplyLogReset, applyLogAdValue, updateApplyLogAdvance, showApplyLogCheck } = applyStore;
    const datas = toJS(applyLogList.data)
    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: doApplyLogReset
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          getCoworkApplyPageList();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (applyLogSearch) {
      compare = compareParams(toJS(applyLogSearch.form.formData), toJS(applyLogSearch.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';

    return (
      <div className={prefixCls}>
        <SearchBar 
          placeholder={getLabel(390654,"请输入主题")}
          value={applyLogAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key={adType} type={adType} /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(applyLogSearch.path)}
          onChange={val => updateApplyLogAdvance(val)}
          onSubmit={getCoworkApplyPageList}
        />
        <SearchAdvanced
          store={applyLogSearch}
          buttonGroupData={buttonGroupData} 
        />

        <div className={`cowork-template ${showApplyLogCheck && 'cowork-template-checked'}`}>
        {
          datas.length === 0 ? renderNoData : (
            <BackTop
              visibilityHeight='200'
              modal
              target='wm-list-view-page-modal-scrollview'
            >
            <ListViewPage.Normal
              store={applyLogList}
              showCheck={showApplyLogCheck}
              getTemplate={this.getTemplate}
              onRowClick={(selectedRowKeys) => {
                this.setState({coworkId: selectedRowKeys.coworkId});
                this.props.history.push(`${this.state.path}?id=${selectedRowKeys.coworkId}`);
              }}
            />
            </BackTop>
          )
        }
        </div>
        <RouteModal/>
      </div>
    );
  }
}